<template>
  <div class="header flex">
    <span class="title">{{ title }}</span>
    <slot name="center" />
    <el-button type="primary" @click="emits('add')">
      <span class="iconfont icon-tianjia"></span>
      <span>{{ eventName }}</span>
    </el-button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{ title: string, eventName: string }>()
const emits = defineEmits(["add"])
</script>

<style scoped lang="scss">
.header {
  justify-content: space-between;
  margin: 10px 0;

  .title {
    font-size: 30px;

    // font-weight: bold;
  }

  :deep(.el-button.el-button--primary) {
    padding-left: 20px;
    padding-right: 20px;

    .icon-tianjia {
      color: white;
      font-size: 20px;
      margin-right: 10px;

    }
  }
}
</style>